<html>
  <head>
    <title>iRock - The Virtual Pet Rock</title>
    <script type="text/javascript" src="javascript/cookie.js"></script>
    <script type="text/javascript">
      var userName;
      function greetUser() {
        if (navigator.cookieEnabled){
          userName = readCookie("irock_username");
        }
        if (userName){
          alert('Hello ' + userName + ", I missed you.");
        } else {
          alert('Hello, I am your pet rock.');
        }
      }
      function touchRock() {
        if (userName) {
          alert("I like the attention, " + userName + ". Thank you.");
        } else {
          userName = prompt("What is your name?", "Enter your name here.");
          if (userName) {
            alert("It is good to meet you. " + userName + ".");
            if (navigator.cookieEnabled){
              writeCookie("irock_username", userName, 5);
            } else {
              alert("Sorry. Cookies aren't supported/enabled in your browser. I won't remember you later.");
            }
          }
        }
        document.getElementById("rockImg").src = "images/rock-smile.jpg";
        setTimeout("document.getElementById('rockImg').src = 'images/rock-onload.jpg';", 5000);
      }
      function resizeRock() {
        document.getElementById("rockImg").style.height = (document.body.clientHeight - 100) * 0.9;
      }
    </script>
  </head>

  <body onload="resizeRock();greetUser();" onresize="resizeRock()">
    <div style="margin-top:100px; text-align:center">
      <img id="rockImg" src="images/rock-onload.jpg" alt="iRock" onclick="touchRock()" style="cursor:pointer">
    </div>
  </body>
